<template>
  <ul class="informations-list">
    <li v-for="index in 6" :key="index">
      <router-link :to="{ name: 'viewer', params: { id: index} }">
        <AutoImage src="/static/images/p1.jpg" alt :width="597" :height="456" />
        <div class="information-name">{{ types[$route.params.type - 1] }} - 图{{index}}</div>
      </router-link>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      types: ["配套图", "效果图", "交通图", "户型图"]
    };
  }
};
</script>
<style lang="stylus">
.informations-list {
  height: calc(100vh - 358px);
  overflow: auto;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 108px 0;
  box-sizing: border-box;

  li {
    margin-left: 68px;
    margin-bottom: 68px;
    position: relative;
  }

  a {
    display: flex;
    width: 597px;
    height: 632px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 14px 25px 2px rgba(28, 56, 122, 0.25);
    border-radius: 50px;
    overflow: hidden;
    flex-direction: column;
    text-decoration: none;

    img {
      height: 456px;
      width: 100%;
      border: 0px;
      margin: 0;
    }

    .information-name {
      height: 170px;
      line-height: 170px;
      font-size: 70px;
      font-weight: 400;
      margin: 0 62px;
      color: #000;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>